import React,{ Component } from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import { connect } from 'react-redux'
import {hashHistory } from 'react-router'
import {user_logined,check_code,user_login} from '../../actions';

const logo = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/logo.png');



let testTable = (dispatch,itemId) => {
  var getEcode = $('.userLogin .inp2 .getEcode'),
      numa = 60,
      _this=this,
      userIp = '未知',
      geted_ecode;

      var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_='+Math.random();
      $.getJSON(url, function(data){
          userIp = data.Ip;
      });
  $('.userLogin .inp2').on('click','.getEcode',function(_this){

    $('.userLogin .err_msg').empty();
    var tel = $('.userLogin .inp1 input'),
        query;

    if(!emp_test(tel.val())){
      $('.userLogin .err_msg').empty().text('* 手机号码不能为空');
      return false;
    }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(tel.val()))){
      $('.userLogin .err_msg').empty().text('* 手机号码格式不正确')
      return false;
    }else{
      // query =  = `mobile=${userId}&hospital_id=${hospitalId}&item_id=${itemId}&item_num=${itemNum}`
      query = "mobile=" + tel.val() + '&ip=' + userIp;
      check_code(query,function(res){
        if(res.code == '200'){
          geted_ecode = res.data;
        }else{
          $('.userLogin .err_msg').empty().text('* ' + res.msg)
        }
      })
    }
    $(this).attr('disabled','disabled');
      tel.attr('disabled','disabled');
      var num = numa,_this = $(this);
      _this.val(num + 's')

      var timer = setInterval(function(){
         if(num>1){
             _this.val(--num + 's');
         }else{
             _this.removeAttr('disabled').val('发送验证码');
             tel.removeAttr('disabled');
             clearInterval(timer);
         }
     },1000);
  })


  function emp_test(a){return 0==a.replace(/^\s+|\s+$/g,"").length?!1:!0};

  $('.userLogin').on('click','.login',function(){

    var tel = $('.userLogin .inp1 input').val(),
        eCode = $('.userLogin .inp2 input').val();
    if(!emp_test(tel)){
      $('.userLogin .err_msg').empty().text('* 手机号码不能为空')
    }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(tel))){
      $('.userLogin .err_msg').empty().text('* 手机号码格式不正确')
    }else if(!emp_test(eCode)){
      $('.userLogin .err_msg').empty().text('* 验证码不能为空')
    }else if(eCode != geted_ecode){
      $('.userLogin .err_msg').empty().text('* 验证码无效')
      return false;
    }
    else{
      var query = "mobile=" + tel + '&check_code=' + geted_ecode + '&from=' + 2 + '&ip=' + userIp;
      user_login(query,function(res){
        if(res.code == '200'){
          dispatch(user_logined(true,res.data.userId,res.data.phone))
          if(!!itemId){
            hashHistory.push('/servItem/det/' + itemId)
          }
        }else{
          $('.userLogin .err_msg').empty().text('* ' + res.msg)
        }
      })
    }
  })
}

class mydefault extends Component{

  componentDidMount(){
    const {dispatch} = this.props;
    testTable(dispatch,this.props.itemId)
  }
  render(){
    return(
      <div className="userLogin">
        <ImageLazy className="logo" src={logo} style={{'height':"1.33rem"}} />
        <h4>欢迎来到美人谷</h4>
        <div className="inp1">
          <select>
            <option>+86</option>
          </select>
          <input type="number"  maxlength="11" ref="getEcode" placeholder="请输入手机号码" />
        </div>
        <div className="inp2">
          <input type="tel" maxlength="6"  placeholder="请输入动态密码" />
          <input type="button" className="getEcode" value="点击获取" />
        </div>
        <div className="err_msg"></div>
        <NavLink to="/user/agreement" className="xieyi">登录代表您已阅读并同意美人谷用户协议协议及隐私政策</NavLink>
        <a href="javascript:void(0)" className="login">登录</a>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  let itemId = state.user.mall_them_hos_servItem_det?state.user.mall_them_hos_servItem_det.itemList[0].itemId:false;
  console.log(itemId)
  let user_logined = !!state.user.user_logined || false;
  return {
    user_logined:user_logined,
    itemId
  }
}

export default connect(mapStateToProps)(mydefault)
